<template>
  <div class="goods">
    <RouterLink :to="{ name: 'Detail', params: { id: goodsInfo.id } }" class="link">
      <el-card style="max-width: 260px" shadow="hover">
        <img :src="goodsInfo.photos" />
        <template #footer>
          <div class="good-info">
            <el-text class="mx-1" size="large">{{ goodsInfo.name }}</el-text>
            <el-text class="mx-1" size="small" truncated>{{ goodsInfo.descInfo }}</el-text>
            <el-text class="mx-1" size="large">
              ￥
              <span style="color: rgb(255, 112, 15)">{{ goodsInfo.price }}</span>
            </el-text>
          </div>
        </template>
      </el-card>
    </RouterLink>
  </div>
</template>

<script setup>
const props = defineProps({
  item: Object
})

const goodsInfo = props.item
</script>

<style scoped>
.goods {
  display: inline-block;
  margin: 20px;
  cursor: pointer;
}

img {
  width: 100%;
  height: 320px;
}

.good-info {
  display: flex;
  gap: 10px;
  flex-direction: column;
  align-items: center;
}

.mx-1 {
  transition: color 0.3s; /* 添加颜色渐变效果 */
}

.goods:hover .mx-1 {
  color: rgb(255, 112, 15); /* 悬停时改变文字颜色 */
}
</style>
